<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .code {
        width: 100%;
        height: 40px;
        /* object-fit: cover; */
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h3>输入框</h3>
      <!-- prefix-icon	输入框头部图标 
          show-password  :是否显示切换密码图标    //:show-password="true"
    
    -->
      <el-input
        prefix-icon="el-icon-user"
        show-password
        v-model="input"
        placeholder="请输入内容"
      ></el-input>
      <h3>珊拦布局</h3>
      <!-- 
          el-row  ：行
             el-col  ：拦（列） 多少列  span:一行24列 Number        
       -->
      <el-row>
        <el-col :span="16">
          <el-input
            prefix-icon="el-icon-user"
            placeholder="请输入验证码"
          ></el-input>
        </el-col>
        <el-col :span="8">
          <img class="code" src="./code.jpg" alt="" />
        </el-col>
      </el-row>
      <h3>复选框</h3>
      <!-- el-checkbox
    v-model对应的值如果是数组，它选中某项后，是在该数组添加/删除该项的值
    v-model对应的值如果是字符串/boolean值，它选中某项后，该值变成true/false
       -->
      <p>{{checked}}</p>
      <!-- <el-checkbox v-model="checked" label="湖北">湖北</el-checkbox>
      <el-checkbox v-model="checked" label="广东">广东</el-checkbox> -->

      <label>
        <input type="checkbox" v-model="checked" value="湖北省" />湖北省
      </label>
      <label>
        <input type="checkbox" v-model="checked" value="湖南省" />湖南省
      </label>
      <h3>表单</h3>
      <!-- 
    el-form 
        label-width:左边标题宽度
        model：数据绑定
    el-form-item代表表单每一项 
        label:当前项的标题 
        label-width：左边标题宽度（自己设置了就优先使用自己的）
-->
      <el-form label-width="80px" :model="formxxx">
        <el-form-item label="用户名">
          <el-input placeholder="请输入手机号" v-model="formxxx.tel"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            placeholder="请输入密码"
            v-model="formxxx.password"
          ></el-input>
        </el-form-item>
        <el-form-item label="验证码">
          <el-row>
            <el-col :span="16">
              <el-input v-model="formxxx.code"></el-input>
            </el-col>
            <el-col :span="8">
              <img class="code" src="./code.jpg" alt="" />
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label-width="0px">
          <el-checkbox v-model="formxxx.isCheck"
            >我已阅读并同意 <el-link type="primary">用户协议</el-link>和<el-link
              type="primary"
              >隐私条款</el-link
            ></el-checkbox
          >
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="toLogin">登陆</el-button>
          <el-button type="primary">注册</el-button>
        </el-form-item>
      </el-form>
    </div>

    <script src="./vue.js"></script>
    <!-- 导入element与它的css -->
    <!-- 引入样式 -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          input: "",
          checked: [],
          formxxx: {
            tel: "",
            password: "",
            isCheck: false,
            code: "",
          },
        },
        methods: {
          toLogin() {
            window.console.log(this.formxxx);
          },
        },
      });
    </script>
  </body>
</html>
